<!-- 首页 -->
<template>
  <view>
	  <!-- #ifdef H5 -->
	  <view class="header u-navbar-fixed" style="z-index:999;">
	  	<view class="serch-box u-height u-padding-top" :style=" {backgroundColor:color} ">
	  		<text class=" name-text" >{{$APP_NAME}}</text>
	  	</view>
	  </view>
	  <!-- #endif -->
	  <!-- #ifdef APP-PLUS -->
	  <view class="mp-header" :class="isFixed ? 'u-navbar-fixed' : ''"  :style="{'padding-top':(isFixed ? statusBarHeight +'px' : '' )}">
	  	<view class="serch-box" :class="isFixed ? 'u-height u-pt' : ''" >
	  		<view class="serch-wrapper flex">
	  			<view class="logo">
	  				<!-- <image :src="logoUrl" mode=""></image> -->
	  				<text class="name-text" >{{$APP_NAME}}</text>
	  			</view>
	  		</view>
	  	</view>
	  </view>
	  <!-- #endif -->
    <!-- 商品列表区域 -->
    <view class="search-view-paging" :style="{'margin-top':(statusBarHeight !== 0 ? statusBarHeight +'rpx' : '100rpx' )}">
      <view 
        v-for="(item, index) in product" 
        :key="index" 
		@click="$Router.push({ path: '/pages/goods/detail', query: { id: item.id } })"
        class="search-view-item" 
      >
        <view class="search-view-item-product">
          <view style="width:300rpx;height:300rpx;display: inline-flex;justify-content: center;align-items: center;">
            <image style="width:240rpx;height:240rpx" mode="aspectFit" :src="item.img" />
          </view>
          <view class="search-view-product-tit">
            <text>{{item.title}}</text>
          </view>
          <view v-if="item.sign"> 
            <text class="main-icon">{{item.sign}}</text>
          </view>
          <view>
            <view style="display:flex;">
              <view class="search-view-product-price">
                <text v-if="item.price">{{item.price}}元</text>
              </view>
             
            </view>
          </view>
        </view>
      </view>
    </view>
    
  </view>
</template>


<script>

// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	data() {
		return {
			statusBarHeight: systemInfo.statusBarHeight,
			color:this.$COLOR,
		 search: {
		
		      filterWord: '',
		      rows: 10,
		      page: 1,
		      testProductFlag: 1,
		      tid: null,
		    },
		    product: [],
		    totalResult: '',  // 数量
		
		    show: false,
		    // show:1,  // 显示加载
		    stepSta: false,
		
		    searchList: [],
		    shop: [],
		    productType:2,
		    isUnit:2,
		};
	},
	computed: {
		...mapGetters(['initShop','hasTemplate','homeTemplate', 'isLogin']),
	
		
	},
	onLoad() {
		console.log('首页地址传参',this.$Route.query)
		if (this.$Route.query.shopProductSid) {
			uni.setStorageSync("shopProductSid", this.$Route.query.shopProductSid);
			console.log("商家id")
		} else {
			uni.removeStorageSync('shopProductSid');
		}
		if (this.$Route.query.promoteId) {
			uni.setStorageSync("promoteId", this.$Route.query.promoteId);
			console.log("推广商Id")
		} else {
			uni.removeStorageSync('promoteId');
		}
		if (this.$Route.query.promoteUserId) {
			uni.setStorageSync("promoteUserId", this.$Route.query.promoteUserId);
			console.log("推广员ID")
		}  else {
			uni.removeStorageSync('promoteUserId');
		}
		
		let shopProductSid = uni.getStorageSync('shopProductSid' );
		let promoteId = uni.getStorageSync('promoteId' );
		    
		if(promoteId && shopProductSid != null){
			uni.request({
			  url: this.$API_URL+`/promotion/app/queryById/${promoteId}`, 
			  method: "GET",
			  data: {}, // 如果有请求体
			  success: (res) => {
			    console.log("查询推广商", res.data); 
				if(res.data.code != 200){
				  console.log('二维码已失效')
				  uni.showModal({
				    content: '二维码已失效',
				    success: function (res) {
				      if (res.confirm) {
						  uni.reLaunch({
						    url: '/pages/index/index'
						  });
				      }
				    }
				  });
				// 跳转
				}else{
					if(res.data.data.prudects != null){
					  this.product = JSON.parse(res.data.data.prudects)
					  console.log('产品',this.product)
					}else{
						uni.showModal({
						  content: '当前链接无商品，请联系商家',
						  success: function (res) {
						    if (res.confirm) {
								uni.reLaunch({
								  url: '/pages/index/index'
								});
						    }
						  }
						});
					// 跳转
					}
				   
						
				}
			  },
			  fail: (err) => {
			    console.error(" 请求失败", err);
			  },
			});
			
		}else{
			uni.showModal({
			  content: '二维码异常，请联系管理员',
			  success: function (res) {
				  console.log(11)
			    if (res.confirm) {
					uni.reLaunch({ 
					  url: '/pages/index/index'
					});
			    }
			  }
			});
		}
	},
	
	created() {
	},
	methods: {
		...mapActions(['appInit', 'getTemplate', 'getCartList']),
	}
};
</script>

<style lang="scss">
	.u-navbar-fixed {
		margin-top: -8rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		
		// background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649574712864576.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.u-height{
		height: 60px;	
	}
	.u-padding-top {
		padding-top: 50rpx;
	}
	.search-view {
	    display: flex;
	    flex-direction: column;
	    padding-bottom: 60rpx;
	}
	
	.list_R_mid_top_text{
	  font-size: 24rpx;
	  color: #999999;
	  line-height: 15rpx;
	}
	.main-icon {
	  display: inline;
	  padding: 2rpx 25rpx;
	  font-size: 22rpx;
	  /* background-color: #BA1AF0; */
	  background-image: linear-gradient(90deg,#83B2F8,#BA1AF0);
	  border-radius: 15rpx;
	  color: #fff;
	}
	/* 顶部 */
	
	.goods_min_R_sign_mian{
	  display: flex;
	  align-items: center; /* 垂直居中 */
	  justify-content: center; 
	  line-height: 28rpx;
	  padding: 5rpx 6rpx;
	  border-radius: 5rpx;
	  background-color: #1677FF;
	  color: #FF3B30;
	  font-size: 20rpx;
	  text-align: center;
	  margin-top: 12rpx;
	  letter-spacing: 1rpx;
	  width: 200rpx;
	  
	}
	.search-view-top {
	    background: #fff;
	    padding: 10rpx;
	}
	.search-view-top view {
	    width: 710rpx;
	    height: 60rpx;
	    background-color: #F8F8F8;
	    border-radius: 20rpx;
	    display: flex;
	    align-items: center;
	    padding-left: 20rpx;
	    box-sizing: border-box;
	}
	
	.search-input {
	    margin-left: 15rpx;
	    font-size: 26rpx;
	    width: 560rpx;
	    color: #666;
	    background-color: #F8F8F8;
	}
	
	.search-view-top-ipt {
	    display: flex;
	    flex-direction: row;
	    padding: 5rpx 20rpx;
	    margin: 30rpx;
	    background: #f5f5f5;
	    height: 50rpx;
	    border-radius: 30rpx;
	    align-items: center
	}
	
	.search-view-top-ipt input {
	    flex: 1;
	    height: 50rpx;
	    border: 0;
	    padding: 0;
	    background: #f5f5f5;
	    margin: 0 0 0 20rpx;
	    font-size: 25rpx;
	}
	
	.search-view-top-ctrl {
	    display: flex;
	    flex-direction: row;
	    padding: 20rpx;
	    justify-content: space-between;
	    align-items: center;
	}
	
	/* 分页 */
	
	.search-view-paging {
	    flex: 1;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
	    background: #f5f5f5;
	    padding: 0 0 20rpx 0;
	}
	
	.search-view-item {
	    width: 50%;
	}
	.name-text{
		color:#ffffff;
		font-weight: bold;
		font-size: 34rpx;
		margin-left: 23rpx;
		z-index: 999;
	}
	.search-view-item-product {
	    border: 1rpx #eee solid;
	    border-radius: 10rpx;
	    background: #fff;
	    padding: 20rpx;
	    margin: 20rpx 10rpx 0 10rpx;
	}
	
	.search-view-product {
	    margin: 30rpx 0 0 0;
	}
	
	.search-view-product-tit {
	    height: 70rpx;
	    line-height: 35rpx;
	    font-size: 24rpx;
	    overflow: hidden;
	    padding: 5rpx 0 0 0;
	}
	.search-view-product-bottom{
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	}
	
	.search-view-product-btn {
	    padding: 10rpx 0;
	}
	
	.search-view-product-btn-1 {
	    border: 1rpx #24aeec solid;
	    font-size: 20rpx;
	    border-radius: 5rpx;
	    padding: 5rpx 10rpx;
	    margin: 0 10rpx 0 0;
	    color: #24aeec
	}
	
	.search-view-product-btn-2 {
	    border: 1rpx #00c8bd solid;
	    font-size: 20rpx;
	    border-radius: 5rpx;
	    padding: 5rpx 10rpx;
	    margin: 0 10rpx 0 0;
	    color: #00c8bd
	}
	
	.search-view-product-price {
	    margin-top:10rpx; 
	    padding: 10rpx 0;
	    color: #ff0000;
	    font-size: 26rpx;
	}
	
	.search-view-product-zulin {
	    padding: 10rpx 20rpx;
	    background-color: #ff6010;
	    color: #fff;
	    border-radius: 0 20rpx 20rpx 20rpx;
	    font-size: 24rpx;
	}
	
	.search-view-shop{
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  background: #f5f5f5;
	}
	
	.search-view-shop-item{
	  width: 100%;
	  height: 200rpx;
	  background: #fff;
	  /* float: left; */
	  padding: 5rpx 10rpx;
	}
	.search-view-shop-img {
	  width: 150rpx;
	  height: 150rpx;
	  border: 1rpx #eee solid;
	  background: #fff;
	  box-sizing: border-box;
	  margin: 25rpx 0 0 20rpx;
	  float: left;
	}
	
	.search-view-shop-right{
	  float: left;
	  width: 62%;
	  height: 200rpx;
	  box-sizing: border-box;
	  margin-left: 40rpx;
	}
	
	.search-view-shop-tit{
	  margin: 20rpx 0;
	  font-size: 28rpx;
	}
	
	.search-view-shop-detail{
	  margin-top: 10rpx;
	  font-size: 22rpx;
	}
	
	.search-view-shop-detail text{
	  line-height: 40rpx;
	  color: rgb(134, 134, 134);
	}
	
	.search-top {
	    width: 100%;
	    height: 100rpx;
	    /* background-color: aquamarine; */
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 0 40rpx;
	    box-sizing: border-box;
	}
	
	.search-top-left {
	    width: 580rpx;
	    height: 70rpx;
	    color: #C3C3C3;
	    background-color: #F1F1F1;
	    display: inline-flex;
	    flex-direction: row;
	    align-items: center;
	    justify-content: space-between;
	    padding: 0 30rpx;
	    box-sizing: border-box;
	    border-radius: 50rpx;
	}
	
	.search-top-left input {
	    width: 420rpx;
	    background-color: #F1F1F1;
	    /* background-color: #000; */
	}
	
	.search-top-right {
	    color: #487AD7;
	    font-weight: 900;
	}
	
	.spinner {
	    text-align: center;
	    height: 60rpx;
	    line-height: 60rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	
	.spinner .bounce {
	    margin-top: 20rpx;
	    width: 13rpx;
	    height: 21rpx;
	    display: inline-block;
	    animation-fill-mode: both;
	    margin-left: 13rpx;
	    transform: skewX(-15deg);
	}
	
	.spinner .bounce1 {
	    background: #108EE9;
	    animation: bouncedelay1 2.1s infinite linear;
	}
	
	.spinner .bounce2 {
	    background: #9DCDEF;
	    animation: bouncedelay2 2.1s infinite linear;
	}
	
	.spinner .bounce3 {
	    background: #EAECF3;
	    animation: bouncedelay3 2.1s infinite linear;
	}
	
	@keyframes bouncedelay1 {
	    0% {
	        background: #108EE9;
	    }
	    50% {
	        background: #9DCDEF;
	    }
	    100% {
	        background: #EAECF3;
	    }
	}
	
	@keyframes bouncedelay2 {
	    0% {
	        background: #9DCDEF;
	    }
	    50% {
	        background: #EAECF3;
	    }
	    100% {
	        background: #108EE9;
	    }
	}
	
	@keyframes bouncedelay3 {
	    0% {
	        background: #EAECF3;
	    }
	    50% {
	        background: #108EE9;
	    }
	    100% {
	        background: #9DCDEF;
	    }
	}
	
	
	.searchList{
	  background-color: #fff;
	  padding: 0 20rpx;
	}
	.searchList_min{
	  border-bottom: 1rpx solid rgb(230, 227, 227);
	  font-size: 28rpx;
	  color: #333;
	  line-height: 46rpx;
	  padding: 20rpx 10rpx;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.sing{
	  background-color: rgb(207, 205, 92);
	  color: #fff;
	  padding: 6rpx 10rpx;
	  border-radius: 4rpx;
	  font-size: 22rpx;
	  line-height: 22rpx;
	}
	
	page {
	    width: 100vw;
	    height: 100vh;
	    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
	      'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
	  }
	  
	.sing{
	  background-color: rgb(207, 205, 92);
	  color: #fff;
	  padding: 6rpx 10rpx;
	  border-radius: 4rpx;
	  font-size: 22rpx;
	  line-height: 22rpx;
	}
	
	.flex-row {
	    display: flex;
	    flex-direction: row;
	  }
	  
	  .flex-wp {
	    flex-wrap: wrap;
	  }
	  .flex-col {
	    display: flex;
	    flex-direction: column;
	  }
	  
	  .justify-start {
	    justify-content: flex-start;
	  }
	  
	  .justify-end {
	    justify-content: flex-end;
	  }
	  
	  .justify-center {
	    justify-content: center;
	  }
	  
	  .justify-between {
	    justify-content: space-between;
	  }
	  
	  .justify-around {
	    justify-content: space-around;
	  }
	  
	  .justify-evenly {
	    justify-content: space-evenly;
	  }
	  
	  .items-start {
	    align-items: flex-start;
	  }
	  
	  .items-end {
	    align-items: flex-end;
	  }
	  
	  .items-center {
	    align-items: center;
	  }
	  
	  .items-baseline {
	    align-items: baseline;
	  }
	  
	  .items-stretch {
	    align-items: stretch;
	  }
	  
	  .self-start {
	    align-self: flex-start;
	  }
	  
	  .self-end {
	    align-self: flex-end;
	  }
	  
	  .self-center {
	    align-self: center;
	  }
	  
	  .self-baseline {
	    align-self: baseline;
	  }
	  
	  .self-stretch {
	    align-self: stretch;
	  }
	  
	  .flex-1 {
	    flex: 1 1 0%;
	  }
	  
	  .flex-auto {
	    flex: 1 1 auto;
	  }
	  
	  .grow {
	    flex-grow: 1;
	  }
	  
	  .grow-0 {
	    flex-grow: 0;
	  }
	  
	  .shrink {
	    flex-shrink: 1;
	  }
	  
	  .shrink-0 {
	    flex-shrink: 0;
	  }
	  
	  .relative {
	    position: relative;
	  }
	  
	  .ml-2 {
	    margin-left: 4rpx;
	  }
	  
	  .mt-2 {
	    margin-top: 4rpx;
	  }
	  
	  .ml-4 {
	    margin-left: 8rpx;
	  }
	  
	  .mt-4 {
	    margin-top: 8rpx;
	  }
	  
	  .ml-6 {
	    margin-left: 12rpx;
	  }
	  
	  .mt-6 {
	    margin-top: 12rpx;
	  }
	  
	  .ml-8 {
	    margin-left: 16rpx;
	  }
	  
	  .mt-8 {
	    margin-top: 16rpx;
	  }
	  
	  .ml-10 {
	    margin-left: 20rpx;
	  }
	  
	  .mt-10 {
	    margin-top: 20rpx;
	  }
	  
	  .ml-12 {
	    margin-left: 24rpx;
	  }
	  
	  .mt-12 {
	    margin-top: 24rpx;
	  }
	  
	  .ml-14 {
	    margin-left: 28rpx;
	  }
	  
	  .mt-14 {
	    margin-top: 28rpx;
	  }
	  
	  .ml-16 {
	    margin-left: 32rpx;
	  }
	  
	  .mt-16 {
	    margin-top: 32rpx;
	  }
	  
	  .ml-18 {
	    margin-left: 36rpx;
	  }
	  
	  .mt-18 {
	    margin-top: 36rpx;
	  }
	  
	  .ml-20 {
	    margin-left: 40rpx;
	  }
	  
	  .mt-20 {
	    margin-top: 40rpx;
	  }
	  
	  .ml-22 {
	    margin-left: 44rpx;
	  }
	  
	  .mt-22 {
	    margin-top: 44rpx;
	  }
	  
	  .ml-24 {
	    margin-left: 48rpx;
	  }
	  
	  .mt-24 {
	    margin-top: 48rpx;
	  }
	  
	  .ml-26 {
	    margin-left: 52rpx;
	  }
	  
	  .mt-26 {
	    margin-top: 52rpx;
	  }
	  
	  .ml-28 {
	    margin-left: 56rpx;
	  }
	  
	  .mt-28 {
	    margin-top: 56rpx;
	  }
	  
	  .ml-30 {
	    margin-left: 60rpx;
	  }
	  
	  .mt-30 {
	    margin-top: 60rpx;
	  }
	  
	  .ml-32 {
	    margin-left: 64rpx;
	  }
	  
	  .mt-32 {
	    margin-top: 64rpx;
	  }
	  
	  .ml-34 {
	    margin-left: 68rpx;
	  }
	  
	  .mt-34 {
	    margin-top: 68rpx;
	  }
	  
	  .ml-36 {
	    margin-left: 72rpx;
	  }
	  
	  .mt-36 {
	    margin-top: 72rpx;
	  }
	  
	  .ml-38 {
	    margin-left: 76rpx;
	  }
	  
	  .mt-38 {
	    margin-top: 76rpx;
	  }
	  
	  .ml-40 {
	    margin-left: 80rpx;
	  }
	  
	  .mt-40 {
	    margin-top: 80rpx;
	  }
	  
	  .ml-42 {
	    margin-left: 84rpx;
	  }
	  
	  .mt-42 {
	    margin-top: 84rpx;
	  }
	  
	  .ml-44 {
	    margin-left: 88rpx;
	  }
	  
	  .mt-44 {
	    margin-top: 88rpx;
	  }
	  
	  .ml-46 {
	    margin-left: 92rpx;
	  }
	  
	  .mt-46 {
	    margin-top: 92rpx;
	  }
	  
	  .ml-48 {
	    margin-left: 96rpx;
	  }
	  
	  .mt-48 {
	    margin-top: 96rpx;
	  }
	  
	  .ml-50 {
	    margin-left: 100rpx;
	  }
	  
	  .mt-50 {
	    margin-top: 100rpx;
	  }
	  
	  .ml-52 {
	    margin-left: 104rpx;
	  }
	  
	  .mt-52 {
	    margin-top: 104rpx;
	  }
	  
	  .ml-54 {
	    margin-left: 108rpx;
	  }
	  
	  .mt-54 {
	    margin-top: 108rpx;
	  }
	  
	  .ml-56 {
	    margin-left: 112rpx;
	  }
	  
	  .mt-56 {
	    margin-top: 112rpx;
	  }
	  
	  .ml-58 {
	    margin-left: 116rpx;
	  }
	  
	  .mt-58 {
	    margin-top: 116rpx;
	  }
	  
	  .ml-60 {
	    margin-left: 120rpx;
	  }
	  
	  .mt-60 {
	    margin-top: 120rpx;
	  }
	  
	  .ml-62 {
	    margin-left: 124rpx;
	  }
	  
	  .mt-62 {
	    margin-top: 124rpx;
	  }
	  
	  .ml-64 {
	    margin-left: 128rpx;
	  }
	  
	  .mt-64 {
	    margin-top: 128rpx;
	  }
	  
	  .ml-66 {
	    margin-left: 132rpx;
	  }
	  
	  .mt-66 {
	    margin-top: 132rpx;
	  }
	  
	  .ml-68 {
	    margin-left: 136rpx;
	  }
	  
	  .mt-68 {
	    margin-top: 136rpx;
	  }
	  
	  .ml-70 {
	    margin-left: 140rpx;
	  }
	  
	  .mt-70 {
	    margin-top: 140rpx;
	  }
	  
	  .ml-72 {
	    margin-left: 144rpx;
	  }
	  
	  .mt-72 {
	    margin-top: 144rpx;
	  }
	  
	  .ml-74 {
	    margin-left: 148rpx;
	  }
	  
	  .mt-74 {
	    margin-top: 148rpx;
	  }
	  
	  .ml-76 {
	    margin-left: 152rpx;
	  }
	  
	  .mt-76 {
	    margin-top: 152rpx;
	  }
	  
	  .ml-78 {
	    margin-left: 156rpx;
	  }
	  
	  .mt-78 {
	    margin-top: 156rpx;
	  }
	  
	  .ml-80 {
	    margin-left: 160rpx;
	  }
	  
	  .mt-80 {
	    margin-top: 160rpx;
	  }
	  
	  .ml-82 {
	    margin-left: 164rpx;
	  }
	  
	  .mt-82 {
	    margin-top: 164rpx;
	  }
	  
	  .ml-84 {
	    margin-left: 168rpx;
	  }
	  
	  .mt-84 {
	    margin-top: 168rpx;
	  }
	  
	  .ml-86 {
	    margin-left: 172rpx;
	  }
	  
	  .mt-86 {
	    margin-top: 172rpx;
	  }
	  
	  .ml-88 {
	    margin-left: 176rpx;
	  }
	  
	  .mt-88 {
	    margin-top: 176rpx;
	  }
	  
	  .ml-90 {
	    margin-left: 180rpx;
	  }
	  
	  .mt-90 {
	    margin-top: 180rpx;
	  }
	  
	  .ml-92 {
	    margin-left: 184rpx;
	  }
	  
	  .mt-92 {
	    margin-top: 184rpx;
	  }
	  
	  .ml-94 {
	    margin-left: 188rpx;
	  }
	  
	  .mt-94 {
	    margin-top: 188rpx;
	  }
	  
	  .ml-96 {
	    margin-left: 192rpx;
	  }
	  
	  .mt-96 {
	    margin-top: 192rpx;
	  }
	  
	  .ml-98 {
	    margin-left: 196rpx;
	  }
	  
	  .mt-98 {
	    margin-top: 196rpx;
	  }
	  
	  .ml-100 {
	    margin-left: 200rpx;
	  }
	  
	  .mt-100 {
	    margin-top: 200rpx;
	  }
	  
	  .pt-10 {
	    padding-top: 10rpx;
	  }
	  
	  .pl-10 {
	    padding-left: 10rpx;
	  }
	  
	  .pb-10 {
	    padding-bottom: 10rpx;
	  }
	  
	  .pr-10 {
	    padding-right: 10rpx;
	  }
	  
	  .pl-20 {
	    padding-left: 20rpx;
	  }
	  .pl-25 {
	    padding-left: 25rpx;
	  }
	  
	  
	  .topBannar{
	    width: 100%;
	    background-color: #1664FF;
	    position: fixed;
	    left: 0;
	    top: 0;
	    z-index: 999;
	    opacity: 0;
	  }
	  
	  /* 滚动 */
	  .warningU {
	    overflow-y: visible;
	    position: sticky;
	    height: 82rpx;
	    position: absolute; 
	    z-index: 3; 
	    top:170rpx;
	    box-sizing: border-box;
	  }
	  
	  /* 顶部提示栏 */
	  .warning{
	    width: 750rpx;
	    height: 60rpx;
	    background-color: rgba(255, 234, 207, 0.863);
	    display: flex;
	  
	  }
	  .warning_L{
	    width: 70rpx;
	    height: 60rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	  .warning_L_icon{
	    width: 36rpx;
	    height: 34rpx;
	  }
	  .warning_M{
	    width: 700rpx;
	    height: 60rpx;
	    overflow: hidden;
	  }
	  .warning_M_text{
	    width: 1000rpx;
	    font-size: 26rpx;
	    color: #E89765;
	    line-height: 60rpx;
	    white-space: nowrap;
	    /* padding: 0 10rpx; */
	    animation: warningRoll 8s linear infinite;
	  }
	  @keyframes warningRoll{
	    0%{
	      transform: translateX(0);
	    }
	    12%{
	      transform: translateX(0);
	    }
	    85%{
	      transform: translateX(-500rpx);
	    }
	    100%{
	      transform: translateX(-500rpx);
	    }
	  }
	  
	  
	  .warning_R{
	    width: 70rpx;
	    height: 60rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	  .warning_R_icon{
	    width: 22rpx;
	    height: 22rpx;
	  }
	  
	  
	  /* .大barner */
	   .barner {
	      width: 750rpx;
	     
	      padding: 0rpx 24rpx;
	      box-sizing: border-box;
	      
	      background: linear-gradient(180deg, #3396FF 0%, #64AFFF 24%, rgba(255,255,255,0.15) 100%);
	    position: relative;
	  }
	  .barner_top_zhan{
	    width: 100%;
	    height: 176rpx;
	  }
	  .barner_up{
	    position: relative;
	  
	    z-index: 2;
	  }
	  
	  
	  .search {
	    overflow-y: visible;
	    position: sticky;
	    height: 82rpx;
	    position: absolute; 
	    z-index: 2; 
	    top:235rpx;
	    left:20rpx;
	    right:20rpx;
	    box-sizing: border-box;
	    }
	    
	    .search-view {
	     width: 100%;
	    
	     height: 62rpx;
	     background-color: #fff;
	     border-radius: 31rpx;
	     display: flex;
	     align-items: center;
	     padding-left: 30rpx;
	     box-sizing: border-box;
	     position: relative;
	    }
	    .search-input {
	     margin-left: 15rpx;
	     font-size: 24rpx;
	     color: #ccc;
	     background-color: #fff;
	    }
	    .search-btn{
	    width: 146rpx;
	    height: 54rpx;
	    border-radius: 31rpx;
	    position: absolute;
	    right: 4rpx;
	    top: 4rpx;
	    }
	    .search-btn text{
	    width: 64px;
	    height: 40px;
	    line-height: 40rpx;
	    font-size: 28rpx;
	    font-weight: 400;
	    color: #FFFFFF;
	    }
	  
	    .swiper{
	  
	    }
	    
	    
	    .swiper-item {
	      display: block;
	    } 
	    
	  
	    /* 小banner */
	  
	    /* .barner {
	      width: 750rpx;
	      padding: 0rpx 24rpx;
	      box-sizing: border-box;
	      background: linear-gradient(180deg, #3396FF 0%, #64AFFF 24%, rgba(255,255,255,0.15) 100%);
	      position: relative;
	  }
	  .barner_top_zhan{
	    width: 100%;
	    height: 176rpx;
	  }
	  .barner_up{
	    position: relative;
	    z-index: 2;
	  }
	  
	  
	  
	  .search {
	    margin-top: 60rpx;
	    width: 100%; 
	    height: 82rpx;
	    box-sizing: border-box;
	  }
	  
	  .search view {
	     width: 100%;
	     height: 62rpx;
	     background-color: #fff;
	     border-radius: 31rpx;
	     display: flex;
	     align-items: center;
	     padding-left: 30rpx;
	     box-sizing: border-box;
	     position: relative;
	  }
	  .search-input {
	     margin-left: 15rpx;
	     font-size: 24rpx;
	     color: #ccc;
	     background-color: #fff;
	  }
	  .search-btn{
	    width: 146rpx;
	    height: 54rpx;
	    border-radius: 31rpx;
	    position: absolute;
	    right: 4rpx;
	    top: 4rpx;
	  }
	  .search-btn text{
	    width: 64px;
	    height: 40px;
	    line-height: 40rpx;
	    font-size: 28rpx;
	    font-weight: 400;
	    color: #FFFFFF;
	  }
	  
	  
	  .swiper-item {
	      display: block;
	      width: 702rpx;
	  } */
	  
	  
	  /* type */
	  .home-type {
	    width: 100%;
	    margin-top: 30rpx;
	    padding: 0 44rpx;
	    box-sizing: border-box;
	    overflow: hidden;
	  }
	  .type {
	    float: left;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    align-items: center;
	    margin-left: 66rpx;
	  }
	  .type-img{
	    border-radius: 25rpx;
	    overflow: hidden;
	  }
	  .type:nth-child(1){
	    margin-left: 0;
	  }
	  .type:nth-child(5){
	    margin-left: 0;
	  }
	  .type-title{
	    margin-top: 10rpx;
	    margin-bottom: 30rpx;
	    color: #333333;
	    font-size: 24rpx;
	  }
	  .type-title_text{
	    /* width: 72rpx; */
	    height: 10rpx;
	    font-size: 24rpx;
	    color: #333333;
	    line-height: 10rpx;
	  }
	  
	  /* 严选二手 */
	  .section_3 {
	    margin:32rpx 18rpx;
	    padding-left: 18rpx;
	    padding-bottom: 32rpx;
	    background-image: linear-gradient(180deg, #bfe8ff -47.4%, #ffffff 36.7%);
	    border-radius: 20rpx;
	  }
	  .group_4 {
	    padding-left: 8rpx;
	  }
	  
	  .font_3 {
	    font-size: 30rpx;
	    font-family: AlimamaShuHeiTi;
	    line-height: 27.24rpx;
	    color: #000000;
	  }
	  .text_3 {
	    font-size: 32rpx;
	    line-height: 29.18rpx;
	  }
	  .text-wrapper {
	    padding: 8rpx 0;
	    border-radius: 16rpx 16rpx 16rpx 0rpx;
	    height: 37rpx;
	    width: 60%;
	    border-left: solid 1rpx #12a8ff;
	    border-right: solid 1rpx #12a8ff;
	    border-top: solid 1rpx #12a8ff;
	    border-bottom: solid 1rpx #12a8ff;
	  }
	  .group_5 {
	    padding-bottom: 4rpx;
	    width: 288rpx;
	  }
	  .section_4 {
	    padding: 16rpx 0 28rpx;
	    background-image: url('https://ide.code.fun/api/image?token=6889bda12b7b7600119c01e7&name=cf2cbc7fd65e4a0a16092dc0a826cfd8.png');
	    background-size: 100% 100%;
	    background-repeat: no-repeat;
	  }
	  
	  .font_2 {
	    font-size: 26rpx;
	    font-family: AlibabaPuHuiTi;
	    line-height: 27.24rpx;
	  }
	  .text {
	    margin-right: 3rpx;
	    color: #ffeb3b;
	    font-size: 24rpx;
	    line-height: 28rpx;
	  }
	  .text_2 {
	    margin-right: 32rpx;
	    color: #ffffff;
	    font-size: 24rpx;
	    line-height: 28rpx;
	  }
	  .image_6 {
	    width: 10rpx;
	    height: 16rpx;
	  }
	  .pos {
	    position: absolute;
	    right: 18.06rpx;
	    bottom: 0;
	  }
	  .equal-division_2 {
	    margin-right: 20rpx;
	  }
	  .section_5 {
	    flex: 1 1 208rpx;
	  }
	  .equal-division-item_2 {
	    background-color: #f5f5f5;
	    border-radius: 24rpx;
	    height: 270rpx;
	  }
	  .image_7 {
	    width: 210rpx;
	    height: 210rpx;
	    border-radius: 20rpx;
	  }
	  .group_6 {
	    padding-left: 20rpx;
	    padding-right: 6rpx;
	  }
	  .group_7 {
	    padding-bottom: 20rpx;
	  }
	  .font_5 {
	    font-size: 16rpx;
	    font-family: MiSans;
	    line-height: 20rpx;
	    color: #000000;
	  }
	  .text_5 {
	    word-break: break-all;
	  }
	  .pos_2 {
	    position: absolute;
	    left: 2.38rpx;
	    right: 8rpx;
	    bottom: 0;
	  }
	  .text-wrapper_3 {
	    margin-left: -8rpx;
	    padding: 8rpx 0;
	    background-image: linear-gradient(90deg, #f0c686 0%, #ffe9c4 100%);
	    border-radius: 60rpx 60rpx 60rpx 4rpx;
	    width: 38rpx;
	    height: 42rpx;
	  }
	  .font_6 {
	    font-size: 26rpx;
	    font-family: MiSans;
	    line-height: 24.08rpx;
	    color: #db6e00;
	  }
	  .text_6 {
	    line-height: 23.42rpx;
	  }
	  .group_8 {
	    padding-left: 20rpx;
	  }
	  .pos_3 {
	    position: absolute;
	    left: 2.38rpx;
	    right: 0;
	    top: 0;
	    bottom: 0;
	  }
	  .text-wrapper_4 {
	    margin-left: -8rpx;
	    padding: 8rpx 0;
	    background-image: linear-gradient(90deg, #f0c686 0%, #ffe9c4 100%);
	    border-radius: 60rpx 60rpx 60rpx 4rpx;
	    width: 44rpx;
	    height: 44rpx;
	  }
	  .group_9 {
	    padding-top: 10rpx ;
	    width: 100%;
	  }
	  .text-wrapper_2 {
	    padding: 12rpx 0;
	    background-image: linear-gradient(90deg, #f0c686 0%, #ffe9c4 100%);
	    border-radius: 60rpx 60rpx 60rpx 4rpx;
	    width: 50rpx;
	    height: 50rpx;
	  }
	  .group_10 {
	    padding-top: 24rpx;
	  }
	  .section_6 {
	    padding: 20rpx 0 44rpx 20rpx;
	    flex: 1 1 332rpx;
	    background-image: linear-gradient(180deg, #d7ffbf -47.4%, #ffffff 36.7%);
	    border-radius: 20rpx;
	    height: 300rpx;
	  }
	  .text_7 {
	    font-size: 28rpx;
	    line-height: 25.48rpx;
	  }
	  .text-wrapper_5 {
	    margin-right: 42rpx;
	    padding: 4rpx 0;
	    background-image: linear-gradient(90deg, #12a8ff 0%, #55f2b3 100%);
	    border-radius: 16rpx 16rpx 16rpx 0rpx;
	    width: 160rpx;
	    height: 36rpx;
	  }
	  .font_7 {
	    font-size: 20rpx;
	    font-family: AlibabaPuHuiTi;
	    line-height: 24.08rpx;
	    color: #ffffff;
	  }
	  .text_8 {
	    margin-left: 8rpx;
	    line-height: 24rpx;
	    width: 112rpx;
	  }
	  .image_8 {
	    width: 90rpx;
	    height: 128rpx;
	  }
	  .image-wrapper {
	    flex: 1 1 142rpx;
	    padding-top: 8rpx;
	    background-color: #ffffff;
	    border-radius: 16rpx;
	    height: 142rpx;
	    border-left: solid 2rpx #a3ddff;
	    border-right: solid 2rpx #a3ddff;
	    border-top: solid 2rpx #a3ddff;
	    border-bottom: solid 2rpx #a3ddff;
	  }
	  .view {
	    margin-right: 20rpx;
	  }
	  .image_9 {
	    width: 98rpx;
	    height: 134rpx;
	  }
	  .group_12 {
	    margin-left: 12rpx;
	  }
	  .section_7 {
	    margin-right: 18rpx;
	    padding: 20rpx 20rpx 28rpx;
	    flex: 1 1 332rpx;
	    background-image: linear-gradient(180deg, #bfffe3 -47.4%, #ffffff 36.7%);
	    border-radius: 20rpx;
	    height: 300rpx;
	  }
	  .text_9 {
	    font-size: 28rpx;
	    line-height: 26.02rpx;
	  }
	  .text-wrapper_6 {
	    margin-right: 4rpx;
	    padding: 4rpx 0;
	    background-image: linear-gradient(90deg, #12a8ff 0%, #55f2b3 100%);
	    border-radius: 16rpx 16rpx 16rpx 0rpx;
	    height: 36rpx;
	  }
	  .text_10 {
	    margin-left: 12rpx;
	    line-height: 24rpx;
	    width: 76rpx;
	  }
	  .image-wrapper_2 {
	    flex: 1 1 142rpx;
	    padding: 4rpx 0;
	    background-color: #ffffff;
	    border-radius: 16rpx;
	    height: 142rpx;
	    border-left: solid 2rpx #a3ddff;
	    border-right: solid 2rpx #a3ddff;
	    border-top: solid 2rpx #a3ddff;
	    border-bottom: solid 2rpx #a3ddff;
	  }
	  .image_10 {
	    width: 92rpx;
	    height: 130rpx;
	  }
	  .image_11 {
	    width: 92rpx;
	    height: 128rpx;
	  }
	  .group_11 {
	    margin: 8rpx 12rpx 0 4rpx;
	  }
	  .font_4 {
	    font-size: 20rpx;
	    font-family: AlibabaPuHuiTi;
	    line-height: 22rpx;
	    color: #333333;
	  }
	  .text_11 {
	    font-size: 18rpx;
	  }
	  .text_14 {
	    font-size: 18rpx;
	    text-align: center;
	  }
	  .text_13 {
	    font-size: 18rpx;
	    width: 132rpx;
	  }
	  .text_4 {
	    margin-left: 8rpx;
	    color: #12a8ff;
	    line-height: 18.48rpx;
	  }
	  .text_12 {
	    font-size: 18rpx;
	    text-align: center;
	  }
	  .text_15 {
	    font-size: 18rpx;
	  }
	  .group_13 {
	    margin-left: 8rpx;
	    margin-right: 18rpx;
	  }
	  .text_16 {
	    color: #1a1a1a;
	    font-size: 34rpx;
	    font-family: SourceHanSansCN;
	    line-height: 40rpx;
	    text-align: center;
	    width: 400rpx;
	  }
	  .text_17 {
	    color: #666666;
	    line-height: 23.68rpx;
	  }
	  .image_12 {
	    width: 16rpx;
	    height: 16rpx;
	  }
	  .grid {
	    margin-right: 18rpx;
	    display: grid;
	    grid-template-rows: repeat(3, minmax(0, 1fr));
	    grid-template-columns: repeat(2, minmax(0, 1fr));
	    row-gap: 26rpx;
	    column-gap: 24rpx;
	  }
	  .grid-item {
	    background-color: #ffffff;
	    border-radius: 20rpx;
	  }
	  .image_13 {
	    border-radius: 20rpx 20rpx 0rpx 0rpx;
	    width: 332rpx;
	    height: 332rpx;
	  }
	  .font_8 {
	    font-size: 30rpx;
	    font-family: SourceHanSansCN;
	    line-height: 36rpx;
	    color: #000000;
	  }
	  .text_18 {
	    width: 230rpx;
	  }
	  .text_19 {
	    margin-left: 8rpx;
	  }
	  .group_15 {
	    padding-left: 16rpx;
	  }
	  .font_9 {
	    font-size: 30rpx;
	    font-family: SourceHanSansCN;
	    line-height: 27.24rpx;
	    color: #e63232;
	  }
	  .text_20 {
	    font-size: 28rpx;
	  }
	  .image_14 {
	    border-radius: 20rpx 4rpx 20rpx 4rpx;
	    width: 64rpx;
	    height: 56rpx;
	    justify-content: flex-end;
	    margin-left: auto;
	  }
	  .group_14 {
	    width: 278.36rpx;
	  }
	  .pos_4 {
	    position: absolute;
	    right: 15rpx;
	    bottom: 0;
	  }
	  .text_21 {
	    font-size: 28rpx;
	  }
	  .text_22 {
	    margin-left: 16rpx;
	    width: 182rpx;
	  }
	  .text_23 {
	    font-size: 28rpx;
	  }
	  .group_16 {
	    padding-left: 24rpx;
	  }
	  .text_24 {
	    margin-top: 24rpx;
	  }
	  .text_25 {
	    margin-left: 16rpx;
	  }
	  .view_2 {
	    margin-left: 16rpx;
	  }
	  .pos_5 {
	    position: absolute;
	    left: 0;
	    bottom: 0;
	  }
	  .section_8 {
	    padding: 72rpx 104rpx;
	    background-color: #ffffff;
	    border-top: solid 2rpx #f7f7f7;
	  }
	  .font_10 {
	    font-size: 20rpx;
	    font-family: SourceHanSansCN;
	    line-height: 20rpx;
	    color: #666666;
	  }
	  .text_26 {
	    color: #12a8ff;
	    line-height: 18.54rpx;
	  }
	  .text_27 {
	    line-height: 18.48rpx;
	  }
	  .text_28 {
	    line-height: 18.54rpx;
	  }
	  
	  .end{
	    width: 100%;
	  height: 22rpx;
	  margin-bottom: 18rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  }
	  .end-text{
	    font-size:20rpx;
	    font-weight: 400;
	    color: #BBBBBB;
	  }
</style>
